<script setup>
import { ref,onMounted } from 'vue'
import { queryAllDept,addDept,deleteDept,updateDept } from '../../api/dept'
const tableData = ref([])
const dialogFormVisible = ref(false)
const editFormVisible = ref(false)
const formLabelWidth = '140px'
const name = ref('')
const id = ref('')
const namelist = ref({
  id: '',
  name: ''
})
const search = async () => { 
  const result = await queryAllDept()
  tableData.value = result.data
  id.value = result.data.id
  console.log(result)
} 
const adddept = async () => { 
  if (!namelist.value.name) return;
  const result = await addDept(namelist.value)
  console.log(result)
  console.log(namelist.value)
  dialogFormVisible.value = false
  namelist.value = { name: '' }
  search()
}
// 从删除按钮中的scope获取id值，再根据id 删除操作
const delDeptHandler = async (id) => {    //这个传入的值是template中 调用的值id 
  const result = await deleteDept(id)   
  console.log(result)
  search()
}

const showEditDialog = (row) => {
  namelist.value = { id: row.id, name: row.name };
  editFormVisible.value = true;
}

const editDept = async () => {
  if (!namelist.value.id || !namelist.value.name) return;
  const result = await updateDept(namelist.value);
  console.log(result);
  editFormVisible.value = false;
  namelist.value = { id: '', name: '' };
  search();
}

onMounted(()=>{
  search()
})

</script>

<template>
  <div class="table">
  <h1>部门管理</h1>
  <!-- 新增部门按钮 -->
  <div class="button">
    <el-button type="primary" class="!ml-0" plain @click="dialogFormVisible = true">
      +新增部门
    </el-button>
  </div>
  <el-dialog v-model="dialogFormVisible" title="新增部门" width="400">
    <el-form>
      <el-form-item label="部门名称" :label-width="formLabelWidth">
        <el-input v-model="namelist.name" autocomplete="off" placeholder="请输入部门名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="adddept">确定</el-button>
      </div>
    </template>
  </el-dialog>
  
  <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%; max-width: 1468px; margin: 0 auto;">
    <el-table-column prop="id" label="序号" width="162" align="center"/>
    <el-table-column prop="name" label="部门名称" width="437" align="center"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="437" align="center" />
    <el-table-column prop="action" label="操作" width="432" align="center">
      <template #default="scope">
  <el-button type="primary" class="!ml-0" plain  @click="showEditDialog(scope.row)">
      编辑
    </el-button>
  <el-button type="danger" @click="delDeptHandler(scope.row.id)">删除</el-button>
      </template>
      </el-table-column> 
  </el-table>

  <el-dialog v-model="editFormVisible" title="编辑部门" width="400">
    <el-form>
      <el-form-item label="部门名称" :label-width="formLabelWidth">
        <el-input v-model="namelist.name" autocomplete="off" placeholder="请输入部门名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editDept">确定</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<style scoped>
.button {
  margin: 20px;
}
.table {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
}
</style>
